<template>
  <!-- 产品服务 -->
  <div>
    <Rotation :listData="bannerList"/>
    <div>
      <ul class="service">
        <li v-for="(item,index) in selectTagList" :key="index" @click="selectTags(index)">
          <img :src="item.disabled ? item .src : item.src1" alt="">
          <div class="smTitle"  :id="index == status  ? 'bechoice' : ''">{{ item.title }}</div>
        </li>
      </ul>
      <Online v-if="checkParam==2"/>
      <Block v-if="checkParam==1"/>
      <Electronics v-if="checkParam==0"/>
      <OnClick v-if="checkParam==3"></OnClick>
      <Lawyer v-if="checkParam==4"/>
    </div>
  </div>
</template>

<script>
import Rotation from "@/components/Rotation";
import Online from "@/components/Online";
import Block from "@/components/Block";
import Electronics from "@/components/Electronics"
import Lawyer from "@/components/Lawyer";
import OnClick from "@/components/OnClick";

export default {
  name: "service",
  components: {
    Rotation,
    Online,
    Block,
    Electronics,
    Lawyer,
    OnClick
  },
  data() {
    return {
      status:0,
      checkParam: 0,
      selectTagList: [
        {
          disabled: true,
          src: require('@/assets/images/serverOne/qianyue1.png'),
          src1: require('@/assets/images/serverOne/qianyue2.png'),
          title: '电子签约'
        },
        {
          disabled: false,
          src: require('@/assets/images/serverOne/qukuailian1.png'),
          src1: require('@/assets/images/serverOne/qukuailian2.png'),
          title: '区块链存证'
        }
        , {
          disabled: false,
          src: require('@/assets/images/serverOne/gongzheng1.png'),
          src1: require('@/assets/images/serverOne/gongzheng2.png'),
          title: '在线公证'
        }
        , {
          disabled: false,
          src: require('@/assets/images/serverOne/zhongcai1.png'),
          src1: require('@/assets/images/serverOne/zhongcai2.png'),
          title: '一键仲裁'
        },
        {
          disabled: false,
          src: require('@/assets/images/serverOne/lvshi 1.png'),
          src1: require('@/assets/images/serverOne/lvshi 2.png'),
          title: '律师服务'
        }
      ],
      bannerList: [{
        a: '全生态产品服务',
        b: '作为国内领先的区块链线上司法服务平台 助力企业打造可信契约新生态',
        c: '免费试用',
        d: '宣传视频',
        src: require("@/assets/images/serverOne/Pic1.png")
      },
        {
          a: '全生态产品服务',
          b: '作为国内领先的区块链线上司法服务平台 助力企业打造可信契约新生态',
          c: '免费试用',
          d: '宣传视频',
          src: require("@/assets/images/serverOne/Pic1.png")
        },
        {
          a: '全生态产品服务',
          b: '作为国内领先的区块链线上司法服务平台 助力企业打造可信契约新生态',
          c: '免费试用',
          d: '宣传视频',
          src: require("@/assets/images/serverOne/Pic1.png")
        },
        {
          a: '全生态产品服务',
          b: '作为国内领先的区块链线上司法服务平台 助力企业打造可信契约新生态',
          c: '免费试用',
          d: '宣传视频',
          src: require("@/assets/images/serverOne/Pic1.png")
        }
      ],
    }
  },
  methods: {
    selectTags(index) {
      this.checkParam = index;
      this.status=index
      this.selectTagList.forEach((res, r) => {
        if (r == index) {
          res.disabled = true

        } else {
          res.disabled = false
        }
      })
    }
  },

}
</script>

<style scoped lang="less">
  li:hover{
    .smTitle{
      color: #1DD2AF;
    }
  }
  li:nth-of-type(1):hover{
    img{
      content: url("../../assets/images/serverOne/qianyue1.png");
    }
  }
  li:nth-of-type(2):hover{
    img{
      content: url("../../assets/images/serverOne/qukuailian1.png");
    }
  }
  li:nth-of-type(3):hover{
    img{
      content: url("../../assets/images/serverOne/gongzheng1.png");
    }
  }
  li:nth-of-type(4):hover{
    img{
      content: url("../../assets/images/serverOne/zhongcai1.png");
    }
  }
  li:nth-of-type(5):hover{
    img{
      content: url("../../assets/images/serverOne/lvshi 1.png");
    }
  }
#bechoice{
  color: #1DD2AF;
}
.service {
  position: relative;
  bottom: 70px;
  margin: 0 auto;
  width: 70%;
  height: 240px;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(6, 0, 1, 0.2000);
  z-index: 99;

  img {

    height: 100px;
  }

  .smTitle {
    margin-top: 19px;
    color: #000000;
  }
}
li{
  cursor:pointer;
}

</style>
